// NOTE: 这个函数是单纯的为填写页面的矩阵单选选项服务的, 很多东西是写死的

function autoWidthTodo(observer) {
  const wrap = document.getElementsByClassName('matrix__options')
  if (wrap.length <= 0) return
  for (const w of wrap) {
    const wrapWidth = Number.parseInt(window.getComputedStyle(w).width)

    let maxWidth = 0
    const li = w.getElementsByClassName('matrix__options__li')
    const liNum = li.length
    for (const l of li) {
      l.style.width = 'auto'
      const width = Number.parseInt(window.getComputedStyle(l).width)
      if (width > maxWidth) maxWidth = width
    }

    let width
    const ratio = maxWidth / wrapWidth
    if (liNum === 1) {
      width = 100
    } else if (ratio > 0.5) {
      width = 100
    } else if (liNum === 2) {
      width = 50
    } else if (ratio > 0.25) {
      width = 50
    } else if (liNum === 3) {
      width = 50
    } else if (liNum === 4) {
      width = 25
    } else if (ratio > 0.2) {
      width = 25
    } else {
      width = 20
    }

    for (const l of li) {
      l.style.width = width + '%'
    }
  }
  observer?.disconnect()
}

export default function autoWidth() {
  // NOTE: 使用观察期时因为有时间渲染较慢, 但也不排除渲染很快导致都没观察到的情况, 故先立即执行一次. 这里可能有点问题, 刚开始的时候, 立即执行 autoWidthTodo 时会发现元素并未渲染完成, 所以才使用观察者. 但是现在测试又发现一直都可以获取到渲染完的元素了
  autoWidthTodo()
  // 选择需要观察变动的节点
  const targetNode = document.getElementById('app')
  // 观察器的配置（需要观察什么变动）
  const config = { childList: true, subtree: true }
  // 当观察到变动时执行的回调函数
  const callback = function (_, observer) {
    autoWidthTodo(observer)
  }
  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver(callback)
  // 以上述配置开始观察目标节点
  observer.observe(targetNode, config)
}
